<template>
  <div>
    <page-list :x-uri="uri" :doactions="doactions" :tree="true" :lazy="true" :lazy-fun="loadChild">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'user.admin.role.create'" size="mini" type="primary" @click="create">新建角色</el-button>
      </template>
    </page-list>
    <el-dialog title="请输入角色名称" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false" top="30vh">
      <el-form v-if="dialogVisible" ref="group" :model="group">
        <el-form-item prop="title" :rules="rulesTtitle" size="small"><edu-input key="title" :value.sync="group.title" :args="{ minlength: 2, maxlength: 30 }" /></el-form-item>
        <el-form-item size="small">
          <el-row type="flex" justify="end">
            <el-button @click="resetForm" v-text="resetText" />
            <el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import EduInput from '@public/form/input.vue';
import { mapState } from 'vuex';
import Tabs from '../tabs';
export default {
  components: {
    PageList,
    EduInput,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: 'admin/user/group/list',
      doactions: [
        // { title: '添加子角色', meta: { permission: 'user.group.create' }, callback: this.addChildren },
        {
          title: '授权',
          meta: { permission: 'user.admin.role.auth' },
          callback: this.doauth
          // display: ({ row }) => {
          //   return !(row.id == 2);
          // }
        },
        { title: '编辑', meta: { permission: 'user.admin.role.edit' }, callback: this.edit },
        {
          title: '删除',
          meta: { permission: 'user.admin.role.delete' },
          callback: this.deleteGroup,
          display: ({ row }) => {
            return !(row.id == 1 || row.id == 2);
          }
        }
      ],
      dialogVisible: false,
      disableSubmit: false,
      resetText: '取消',
      group: {
        pid: 0,
        title: ''
      },
      rulesTtitle: [
        { required: true, message: '角色名称必须填写', trigger: ['blur', 'change'] },
        {
          validator: (rule, value, callback) => {
            const reg = /^.{2,30}$/;
            if (!reg.test(value)) {
              return callback(new Error('角色名称为2-30个字符'));
            }
            callback();
          },
          trigger: ['blur', 'change']
        }
      ]
    };
  },
  computed: {
    ...mapState('pageList', {
      pageData: 'responseData'
    })
  },
  methods: {
    create: function() {
      this.group = {
        pid: 0,
        title: ''
      };
      this.dialogVisible = !this.dialogVisible;
    },
    addChildren: function({ row }) {
      this.group = {
        pid: row.id,
        title: ''
      };
      this.dialogVisible = !this.dialogVisible;
    },
    edit: function({ row }) {
      this.group = {
        id: row.id,
        title: row.title
      };
      this.dialogVisible = !this.dialogVisible;
    },
    doauth: function({ row }) {
      this.$router.push({ path: '/user/group/auth/' + row.id + '/edit' });
    },
    deleteGroup: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/admin/user/group/' + row.id,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    resetForm: function() {
      this.dialogVisible = false;
    },
    onSubmit: function() {
      this.$refs['group'].validate(valid => {
        if (valid) {
          this.disableSubmit = true;
          var method = 'POST';
          var uri = '/admin/user/group';
          if (this.group.id) {
            method = 'PUT';
            uri = '/admin/user/group/' + this.group.id;
          }
          this.$http.send(
            method,
            uri,
            this.group,
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.disableSubmit = false;
              this.$message.error(error.msg);
            }
          );
        }
      });
    },
    loadChild: function(row, treeNode, resolve) {
      this.$http.get(
        '/admin/user/group/' + row.id + '/children',
        {
          pid: row.id
        },
        ({ data }) => {
          resolve(data);
        },
        response => {
          resolve([]);
          this.$message.error(response.msg);
        },
        false
      );
    }
  }
};
</script>
